<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <link rel="stylesheet" href="https://tstatic.dgg.net/static/plugs/DataTables/css/jquery.dataTables.css">
    <link rel="stylesheet" href="https://tstatic.dgg.net/static/plugs/layui/css/layui.min.css">
    <link rel="stylesheet" href="https://tstatic.dgg.net/static/css/dgg-iboss.min.css">
    <link rel="stylesheet" href="https://tstatic.dgg.net/static/css/dgg-plugs.min.css">
</head>
<body>
<div class="titleSearch">
    <div class="layui-inline">
        <label>所属事业部：</label>
        <div class="layui-input-inline">
            <select class="select-style">
                <option>请选择</option>
            </select>
        </div>
    </div>
    <div class="layui-inline">
        <label>出库原因：</label>
        <div class="layui-input-inline">
            <select class="select-style">
                <option>请选择</option>
            </select>
        </div>
    </div>
    <div class="layui-inline">
        <label>类型：</label>
        <div class="layui-input-inline">
            <select class="select-style">
                <option>请选择</option>
            </select>
        </div>
    </div>
    <div class="layui-inline">
        <label>操作时间：</label>
        <div class="layui-inline">
            <input type="text" name="startDate" placeholder="开始时间" class="Wdate input-style" id="d4311" onfocus="var d4312=$dp.$('d4312'); WdatePicker({onpicked:function(){d4312.focus();}, maxDate:'#F{ $dp.$D(\'d4312\')}', dateFmt:'yyyy-MM-dd'})">
        </div>
        <span>~</span>
        <div class="layui-inline">
            <input type="text" name="endDate" placeholder="结束时间" class="Wdate input-style" id="d4312" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'d4311\')}', dateFmt:'yyyy-MM-dd'})">
        </div>
    </div>
    <div class="layui-inline">
        <label>关键字：</label>
        <div class="layui-input-inline">
            <input type="text" class="input-style" placeholder="操作人/领用人/证书系统ID">
        </div>
    </div>
    <div class="layui-inline">
        <button class="layui-btn layui-btn-mini layui-btn-normal">搜索</button>
        <button class="layui-btn layui-btn-mini layui-btn-primary">清空</button>
        <button class="layui-btn layui-btn-mini layui-btn-green">导出</button>
    </div>
</div>
<div class="table-conter">
    <a href="javascript:void(0)" class="layui-btn layui-btn-mini">转交</a>
</div>
<table id="myTable" class="cell-border crm-table">
</table>
<script src="https://tstatic.dgg.net/static/plugs/jquery/jquery-1.9.1.min.js"></script>
<script src="https://tstatic.dgg.net/static/plugs/DataTables/js/jquery.dataTables.js"></script>
<script src="https://tstatic.dgg.net/static/plugs/DataTables/js/dataTables.fixedColumns.min.js"></script>
<script src="https://tstatic.dgg.net/static/plugs/DataTables/js/dataTable.extend.js"></script>
<script>
    $(function () {
        $('#myTable').dataTableExtend({
            "ajax": "https://www.easy-mock.com/mock/5b601a98e5570610098cc81f/interface/table.co",
//			    	"select":true,
//			    	"scrollX":"true",//是否开启横项滚动
//					"fixedColumns":   {//锁定列，只有开启scrollX时才生效
//			            "leftColumns": 2,//左侧锁定2列
//			            "rightColumns": 1//右侧锁定1列
//			        },
            "aoColumns": [
                {
                    "sClass": "check-th",
                    "orderable": false,
                    "data": "ID",
                    "render": function (data, type, full, meta) {
                        return '<input type="checkbox"  class="checkchild"  value="' + data + '" />';
                    }
                },
                {
                    "title":"序号",
                    "render": function (data, type, full, meta) {
//			                    console.log(meta.row);
                        return meta.row+1;
                    }
                },
                {
                    "title":"所属事业部",
                    "data": "businessOrganizationId",
                    "orderable": false
                },
                {
                    "title":"证书系统ID",
                    "data": "no",
                    "orderable": false
                },
                {
                    "title":"出库操作人",
                    "data": "createrName",
                    "orderable": false
                },
                {
                    "title":"领用人",
                    "data": "lastFollowRecordUser",
                    "orderable": false,
                    "visible": false
                },
                {
                    "title":"类型",
                    "data": "originType",
                    "orderable": false
                },
                {
                    "title":"操作时间",
                    "data": "createTime",
                    "orderable": false
                },
                {
                    "title":"出入库原因",
                    "data": "lastFollowRecordContent",
                    "width":"200px",
                    "orderable": false,
                    "render":function (data) {
                        return '<div class="line2" title="'+data+'">'+data+'</div> '
                    }
                },
                {
                    "title":"备注",
                    "data": "description",
                    "orderable": false
                }
            ],
        });
    })
</script>
</body>
</html>